<template>
    <div class="header">
        <div class="logo">
            <img src="../assets/img/logo.png" alt="">
            <span>{{systemName}}</span>
        </div>
        <div class="header-right">
            <!-- 用户头像 -->
            <div class="user-avator">
                <i class="el-icon-s-custom"></i>
            </div>
            <!-- 用户 -->
            <div class="user-name">
                Admin
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            systemName: window.g.systemName
        };
    },
    methods: {
        
    }
};
</script>
<style lang="scss" scoped>
.header {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 6vh;
    line-height: 6vh;
    font-size: 2vh;
    color: #EEF0F4;
    background: #01264F url('../assets/img/header-bg.png') no-repeat center;
    background-size: auto 100%;
    .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2.4vh;
        img {
            width: 5vh;
            margin-right: 1vw;
        }
    }
    .header-right {
        position: absolute;
        top: 0;
        right: 0;
        padding-right: 20px;
        height: 6vh;
        display: flex;
        align-items: center;
        .user-avator {
            i {
                font-size: 2.2vh;
                color: #00AFFF;
            }
        }
        .user-name {
            color: #00AFFF;
            margin-left: 10px; 
        }
    }
}
</style>
